<div class="padding-bottom-45">

  <h3>
    <span>{{l('EditUser')}}</span>
  </h3>


  <form nz-form #validateForm="ngForm" (ngSubmit)="save()" *ngIf="user">
    <nz-tabset>
      <nz-tab [nzTitle]="l('UserDetails')">
        <!-- 用户账号 -->
        <nz-form-item>
          <nz-form-control nzHasFeedback>
            <input nz-input name="userName" #userName="ngModel" [(ngModel)]="user.userName" [placeholder]="l('UserName')" required>
            <nz-form-explain *ngIf="userName.control.dirty&&userName.control.errors">
              <ng-container *ngIf="userName.control.hasError('required')">{{l('CanNotNull')}}</ng-container>
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>

        <!-- 名 / 姓名 -->
        <nz-form-item>
          <nz-col [nzSpan]="12">
            <nz-form-control nzHasFeedback>
              <input nz-input name="name" #name="ngModel" [(ngModel)]="user.name" [placeholder]="l('name')" autocomplete="name" required>
              <nz-form-explain *ngIf="name.control.dirty&&name.control.errors">
                <ng-container *ngIf="name.control.hasError('required')">{{l('CanNotNull')}}</ng-container>
              </nz-form-explain>
            </nz-form-control>
          </nz-col>
          <nz-col [nzSpan]="12">
            <nz-form-control nzHasFeedback>
              <input nz-input name="surname" #surname="ngModel" [(ngModel)]="user.surname" [placeholder]="l('Surname')" required>
              <nz-form-explain *ngIf="surname.control.dirty&&surname.control.errors">
                <ng-container *ngIf="surname.control.hasError('required')">{{l('CanNotNull')}}</ng-container>
              </nz-form-explain>
            </nz-form-control>
          </nz-col>
        </nz-form-item>

        <!-- 邮箱 -->
        <nz-form-item>
          <nz-form-control nzHasFeedback>
            <input nz-input name="emailAddress" #emailAddress="ngModel" [(ngModel)]="user.emailAddress" [placeholder]="l('EmailAddress')"
              autocomplete="email" required email>
            <nz-form-explain *ngIf="emailAddress.control.dirty&&emailAddress.control.errors">
              <ng-container *ngIf="emailAddress.control.hasError('required')">{{l('CanNotNull')}}</ng-container>
              <ng-container *ngIf="emailAddress.control.hasError('email')">{{l('NotEmail')}}</ng-container>
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>

        <!-- 激活 -->
        <nz-form-item>
          <label nz-checkbox name="isActive" [(ngModel)]="user.isActive">{{l('IsActive')}}</label>
        </nz-form-item>
      </nz-tab>


      <nz-tab [nzTitle]="l('UserRoles')">
        <nz-checkbox-group name="roles" [(ngModel)]="roleList"></nz-checkbox-group>
      </nz-tab>

    </nz-tabset>


    <!-- 功能按钮 -->
    <div class="custom-modal-footer">
      <div class="custom-modal-footter-group">
        <button nz-button type="button" [disabled]="saving" (click)="close()">
          {{l("Cancel")}}
        </button>
        <button nz-button [nzType]="'primary'" type="submit" [disabled]="!validateForm.valid||saving">
          {{l("Save")}}
        </button>
      </div>
    </div>

  </form>
</div>
